<style>

    .red_package{
        display:flex;
        max-width: 560px;

    }
    .red_package_left{
        color: white;
        font-size:32px;
        position: absolute;
        align-self: center;
        width: 150px;
        text-align: center;
    }
</style>

<div class="container red_package" >
    <img  src="{{url('resources/views/pctotopup/images/red_package.png')}}" style="height:80px;width:100%"/>
    <div class=" red_package_left">
        8折券
    </div>
    <div style="position:absolute;margin-left:11%;">

        <div class="row" style="padding: 0px">
            <div class="col-6" style="padding-right: 0px;padding-left: 5px;padding-top: 18px">
                <div style="font-size: 16px;color: white;white-space:nowrap; width: 200px">
                    剩余时间：
                    <span id="time" style="font-size: 20px;font-weight: bolder"></span>

                </div>
            </div>
            <div class="col-6" style="padding-left:60px;padding-top: 16px">
                <button type="button" class="btn btn-warning" style="font-size: 12px;color: white">立即使用</button>
            </div>
        </div>
        <div style="font-size: 14px;color: white;margin-left: -10px">开通自动续费，下月自动享8折优惠</div>

        <clock total_micro_second=3600000></clock>
    </div>
</div>
{{--  倒计时--}}
<script>
    window.onload = function(){

        //    计算两个小时总的毫秒数
        var totalTime = 2 * 3600 * 1000;
        //    每毫秒递减100
        var stop =  setInterval(function () {
            totalTime = totalTime - 100;
            //    把当前的值格式化时间
            var hours = parseInt((totalTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

            var minutes = parseInt((totalTime % (1000 * 60 * 60)) / (1000 * 60));
            if (minutes < 10){
                minutes = "0" + minutes;
            }
            var seconds = (totalTime % (1000 * 60)) / 1000;
            if (seconds < 10){
                seconds = "0" + seconds;
            }
            var oTime=document.getElementById("time");
            oTime.innerHTML = hours + ":" + minutes + ":" + seconds;
            if (hours <= 0 && minutes <= 0 && seconds <= 0 ){
                document.getElementById("red_packages").style.display="none";
                clearInterval(stop);
            }
        }, 100);

    }


</script>